<template>
	<div>
		<div class="navbar navbar-inverse navbar-fixed-top" id="navbar">
			<mt-header title="我的订单" style="font-size: 26px; background-color: white; color: #000000;height: 60px;">
				<router-link to="/mylogin" slot="left" style="font-size: 15px;">
					<mt-button icon="back">返回</mt-button>
				</router-link>
			</mt-header>
		</div>
		<div style="margin-top: 60px;">
			<van-tabs v-model="active" v-show="isShow" sticky>
				<van-tab v-for="(item,index) in titleList" :title="item.title" :key="index">
					<div class="xia">
						<div class="jie">
							<span style="font-size: 15px; font-weight: 600;">订单信息</span>
							<hr>
							<p>地址：{{orderaddr}}</p>
							<p style="margin-left: 160px;margin-top: 50px;font-size: 14px;">收货人：{{userorder}}</p>
							<p style="margin-left: 160px;font-size: 14px;">电话：{{orderphone}}</p>
							<p style="margin-left: 100px;font-size: 14px;">下单时间：{{nowTime}}</p>
						</div>
						<div>
							<button class="btn btn-default" type="button" style=" margin-left: 180px;">确认收货</button>
							<button class="btn btn-default" type="button" style="margin-left: 10px;">退款</button>
						</div>
					</div>
				</van-tab>
				<van-empty description="您没有任何订单呦~" v-show="emptyShow" />
			</van-tabs>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'orderdetail',
		data() {
			return {
				userorder: '',
				orderphone: '',
				nowTime: '',
				orderaddr:'',
				active: 0,
				isShow: false,
				emptyShow: false,
				titleList: [{
						title: '全部'
					},
					{
						title: '待付款'
					},
					{
						title: '待评价'
					},
					{
						title: '退款'
					},

				]
			};
		},
		mounted() {
			var getfood = JSON.parse(localStorage.getItem("order"))
			this.userorder = getfood.userorder
			this.orderphone = getfood.orderphone
			this.orderaddr = getfood.orderaddr
			this.nowTime = getfood.usertime
			if (this.foodname != '') {
				this.isShow = !this.isShow
			} else {
				this.emptyShow = !this.emptyShow
			}
		},
	}
</script>

<style scoped="scoped">

	.myorder {
		border: 0.5px outset;
		width: 336px;
		height: 180px;
		border-radius: 15px;
		margin-top: 10px;
		margin-left: 20px;
	}

	.xia {
		white-space: nowrap;
		border: 1px outset;
		width: 336px;
		height: 300px;
		border-radius: 20px;
		margin-top: 10px;
		margin-left: 20px;
		background-color: #F5F5F5;
	}
	
	
	.jie {
		width: 300px;
		height: 230px;
		margin-top: 20px;
		margin-left: 20px;
		font-size: 15px;
	}
</style>
